<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <el-page-header @back="goBack" content="购买页面" class="header"></el-page-header>
    <div class="body">
      <div>
        <div class="body-item1">
          <el-image style="width: 450px" :src="url" :preview-src-list="srcList">
          </el-image>
        </div>
        <div class="body-item2">
          <div class="item2-item1">
            <div class="item1-content1">
              <h3>大智慧 大空间 超安全 问界 新M7 享六座 大五座</h3>
            </div>
            <div class="item1-content2">
              <div>销售价：￥255,800</div>
              <div>
                <p> 销售数量
                  <button @click="num == 0 ? 0 : num --">-</button>
                  <button>{{ num }}</button>
                  <button @click="num++">+</button>
                </p>
              </div>
              <div class="money">所需金额：￥{{ total }}</div>
              <div class="content2-item3"><button class="item3-button" @click="pay">立即购买</button><button class="item3-button"
                  @click="addShopcart">加入购物车</button></div>
            </div>
          </div>
          <div class="item2-item2">
            <div class="item2-content1">
              <h3>商品参数</h3>
            </div>
            <div class="item2-content2">
              <p>车辆配置：M7 Plus 后驱款/冰晶灰/极夜黑/20英寸十辐铝制轮毂/无科技舒享包</p>
              <p>享受服务：尊享至高27000元权益（限2023年11月31日前下定用户），如有疑问建议您咨询门店顾问。</p>
              <p>大身材：车长5020毫米/车宽1945毫米/车高1760毫米</p>
              <p>大空间：超宽敞/超能装/主副驾小憩/VIP影院模式/大床模式</p>
              <p>百变空间：一人的自由/两人的浪漫/三人的幸福/四人的热闹</p>
              <p>大舒适：全新舒享座椅/前后排八点式全背部按摩/前后排座椅电动可调/双空调豪华配置/全自动舒享电动踏板</p>
              <p>鸿蒙智能座舱：全方位自适应调节/一键预约配车/空间音频/前后排一起看剧K歌/后排舒适度调节/追剧游戏不间断/吹着空调玩无人机</p>
              <p>大本领：后驱版CLTC综合续航1300公里/四驱百公里加速4.8秒/后驱版CLTC油耗5.6L/100km/后驱版百公里制动距离34.2米</p>
              <p>主动安全：前向车辆/行人防碰撞（AEB）/遇落石自动紧急制动（GAEB）</p>
              <p>车身颜色：松霜绿/天青蓝/陶瓷白/鎏金黑/冰晶银</p>
              <p>精美座舱：韶华杏/琥珀棕/极夜黑</p>
              <p>方向盘圈数：2.38圈</p>
              <p>0-100km/h加速时间：4.8秒</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hello_world">
      <button class="top" @click="toTop">
        <img src="@/assets/backToTop.png" width="100%">
      </button>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'z_seven_shop',
    data() {
      return {
        num: 0,
        url: 'https://res.vmallres.com//uomcdn/CN/pms/202311/FBC3A1290B249298467D0CCC17222D0A.jpg',
        srcList: [
          'https://res.vmallres.com//uomcdn/CN/pms/202311/FBC3A1290B249298467D0CCC17222D0A.jpg'
        ]
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      toTop() {
        window.location.reload()
      },
      sunAdd() {
        this.num = this.num + 1
      },
      sumDelete() {
        if (this.num === 0) {
          this.num = this.num - 0
        } else {
          this.num = this.num - 1
        }
      },
      addShopcart() {
        this.$store.commit('shopcart/addShopcart', {
          id: 2,
          count: parseInt(this.num),
          url: 'https://res.vmallres.com//uomcdn/CN/pms/202311/FBC3A1290B249298467D0CCC17222D0A.jpg',
          price: 255800,
          detail: '问界M7',
          selected: true,
          path: '/w_seven/shop'
        })
      },
      pay() {
        this.$router.push({
          name: 'pay',
          params: {
            detail: {
              id: 2,
              count: parseInt(this.num),
              url: 'https://res.vmallres.com//uomcdn/CN/pms/202311/FBC3A1290B249298467D0CCC17222D0A.jpg',
              price: 255800,
              detail: '问界S7',
              selected: true,
              path: '/w_seven/shop'
            }
          }
        })
        this.$store.state.onHomePage = false
      }
    },
    computed: {
      total() {
        return this.num * 255800
      }
    },
    mounted() {
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        this.scroll = new BScroll('.body', {
          click: true,
          mouseWheel: true
        })
      })
    }
  }
</script>

<style scoped>
  .money {
    margin-bottom: 10px;
  }

  .item3-button {
    background-color: red;
    border-radius: 5px;
    margin: 3px;
    opacity: 0.8;
  }

  .item1-content2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .item2-content2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .item1-content1 {
    border-bottom: solid 1px gray;
  }

  .item2-content1 {
    border-bottom: solid 1px gray;
  }

  .item2-item2 {
    width: 440px;
    margin: 2px;
    border: solid 1px gray;
    border-radius: 5px;
    background-color: #fff;
    padding-left: 5px;
  }

  .item2-item1 {
    width: 440px;
    margin: 2px;
    border: solid 1px gray;
    border-radius: 5px;
    background-color: #fff;
    padding-left: 5px;
  }

  .top {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 100px;
    right: 5px;
    background-color: #fff;
    border: solid 1px gray;
    border-radius: 50%;
  }

  .body-item1 {
    width: 450px;
    height: 50%;
  }

  .father {
    width: 450px;
    height: 100%;
  }

  .header {
    width: 100%;
    height: 5%;
  }

  .body {
    width: 450px;
    height: 630px;
    overflow: hidden;
    background-color: #888;
    border-bottom: solid 1px gray;
  }
</style>
